<template>
	<view class="bg-light flex flex-column" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 收货地址 -->
		<view class="bg-white mx-3 my-2 p-3 rounded-lg">
			<view class="flex align-center">
				<text class="font ml-1">所选仓库</text>
			</view>
			<view class="pl-4"> </view>
		</view>
		<!-- 包裹 -->
		<view class="bg-white mx-3 my-2 px-3 pt-3 pb-5 rounded-lg">
			<view class="flex-column py-3 border-bottom border-light flex">
				<view class="pb-2 flex justify-between" style="align-items: center">
					<text class="font-md">采购单号</text>
					<text class="font-sm" @click="toggle(Parcel.LogisticsNumbers)">{{
            Parcel.Unit_Price_SerialNumber
          }}</text>
				</view>
				<view class="flex">
					<image :src="Domain_IMG + Parcel.Picture_URL" class="rounded-lg flex-shrink"
						style="width: 150rpx; height: 150rpx" mode=""></image>
					<view class="pr-3 ml-3 text-ellipsis" style="width: 100%; position: relative">
						<text class="font">{{ Parcel.Article_Name }}</text><br />
						<text class="font-sm text-muted">规格:{{ Parcel.Specifications_Name }}</text>
						<text class="font-sm"
							style="position: absolute; top: 50rpx; right: 0">×{{ Parcel.Quantity }}</text>
						<view class="flex justify-between align-center w-100" style="height: 60rpx">
							<view class="" style="line-height: 60rpx">
								<text class="font-sm"
									style="position: absolute; bottom: 0; left: 0">￥{{ Parcel.Amount }}</text>
							</view>
							<view class="" v-if="Parcel.Row_Status == '1' || Parcel.Row_Status == '7'">
								<view v-show="hide" v-if="Parcel.Refund_Type == '0'"
									@click="tuikuan(Parcel.Sales_Order_SerialNumber)"
									class="bg-danger text-center font-sm text-white pr-3 pl-3" style="
									line-height: 50rpx;
									width: 100rpx;
									height: 50rpx;
									border-radius: 25rpx;
                  				">
									申请退款
								</view>
								<view v-show="hide" v-else @click="quxiao(Parcel.Sales_Order_SerialNumber)"
									class="bg-success text-center font-sm text-white pr-3 pl-3" style="
									line-height: 50rpx;
									width: 100rpx;
									height: 50rpx;
									border-radius: 25rpx;
								">
									取消退款
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="bg-white mx-3 my-2 p-3 rounded-lg">
			<view class="border-bottom border-light text-ellipsis">
				<text class="font text-muted txt">订单编码<text class="ml-5 text-hover-dark">{{
            Parcel.Purchase_Order_SerialNumber
          }}</text></text><br />
				<text class="font text-muted txt">下单时间<text class="ml-5 text-hover-dark">{{
            Parcel.Purchase_Date
          }}</text></text><br />
				<text class="font text-muted txt">商品金额<text
						class="ml-5 text-hover-dark">￥{{ Parcel.Article_UnitPrice }}</text></text><br />
			</view>
			<view class="mt-3 flex flex-row-reverse">
				<text class="font-sm text-muted">共<text class="text-hover-dark">{{ Parcel.Quantity }}</text>件商品，合计<text
						class="text-hover-dark font-weight-bold">￥{{ Parcel.Amount }}</text></text>
			</view>
		</view>

		<!-- 付款信息 -->
		<view class="mb-5">
			<view v-for="(item, index) in detailed_information_list" :key="index"
				class="bg-white mx-3 my-2 p-3 rounded-lg font">
				<view class="flex justify-between mb-2">
					<view>账期说明:</view>
					<view>{{ item.Trading_Explain }}</view>
				</view>
				<view class="flex justify-between mb-2">
					<view>额度/优惠:</view>
					<view>{{ item.Trading_Percentage }}%</view>
				</view>
				<view class="flex justify-between mb-2">
					<view>应收金额:</view>
					<view>￥{{ item.Purchase_Amount }}</view>
				</view>
				<view class="flex justify-between mb-2">
					<view>实收金额:</view>
					<view>￥{{ item.Paid_Amount ? item.Paid_Amount : 0 }}</view>
				</view>
				<view class="flex justify-between mb-2">
					<view>账单状态:</view>
					<view>{{ statusMap[item.Row_Status] }}</view>
				</view>
				<view class="flex justify-between mb-2" v-if="item.Row_Status == 0">
					<view></view>
					<view @click="
              payment(
                item.Purchase_Amount,
                item.Purchase_Order_Paystages_SerialNumber
              )
            " class="bg-danger rounded-lg font text-white text-center p-2" style="height: 40rpx">去付款</view>
				</view>
			</view>
		</view>
		<!-- <view
      id="fixed"
      class="px-3 py-2 fixed-bottom flex justify-between bg-white"
    >
      <view
        v-if="Parcel.Row_Status == '0'"
        class="bg-muted rounded text-center py-2 text-white font font-weight-bold"
        style="width: 220rpx; float: right"
        @click="cancel(Parcel.Collection_SerialNumber)"
        hover-class="bg-hover-info"
        :hover-stay-time="150"
        >取消该订单</view
      >
      <view
        v-if="Parcel.Row_Status == '0'"
        class="bg-info rounded text-center py-2 text-white font font-weight-bold"
        style="width: 220rpx; float: right"
        @click="handleDetails()"
        hover-class="bg-hover-info"
        :hover-stay-time="150"
        >去付款</view
      >
    </view> -->

		<Tailpay :amount="Price(accAdd(Parcel.Sales_Amount, Parcel.Delivery_Amount))"
			:Sales_Order_SerialNumber="Parcel.children[0].Sales_Order_SerialNumber"
			:Article_Name="Parcel.children[0].Article_Name" :Collection_SerialNumber="Parcel.Collection_SerialNumber"
			:show="isShow" @Close="handleClose()"></Tailpay>
		<Tailpays :amount="Price(accAdd(Parcel.Sales_Amount, Parcel.Delivery_Amount))"
			:Sales_Order_SerialNumber="Parcel.children[0].Sales_Order_SerialNumber"
			:Article_Name="Parcel.children[0].Article_Name" :Collection_SerialNumber="Parcel.Collection_SerialNumber"
			:show="isShow2" @Close="handleClose()"></Tailpays>
		<Procure_order_Details :show="isShow3" :Purchase_Order_Paystages_SerialNumber="
        Purchase_Order_Paystages_SerialNumber
      " @Close="Close()" :amount="amount"></Procure_order_Details>
	</view>
</template>

<script>
	import Tailpay from "@/components/payment/Tailpayment.vue";
	import Tailpays from "@/components/payment/Tailpayments.vue";
	import Procure_order_Details from "@/components/payment/Procure_order_Details.vue";
	import {
		get_wj,
		getPurchaseOrderPaystages
	} from "@/api/merchant.js";
	const app = getApp();
	export default {
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
				fixedHeight: 0, //底部元素高度
				loading: true, //节流
				isShow: false, //调起支付方式
				isShow2: false, //调起支付方式
				isShow3: false,
				hide: true,
				Parcel: {
					//订单详情
				},
				LogisticsNumbers: [],
				goods: [],
				detailed_information_list: [], //详细金额信息
				statusMap: {
					0: "未付款",
					1: "已付款",
					2: "退款申请",
					3: "已退款",
				},
				amount: 0, //组件参数
				Purchase_Order_Paystages_SerialNumber: "",
			};
		},
		components: {
			Tailpay,
			Tailpays,
			Procure_order_Details,
		},
		computed: {
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
		},
		onLoad(e) {
			console.log(e);
			this.Parcel = JSON.parse(decodeURIComponent(e.Order));
			this.detailed_information(this.Parcel.Purchase_Order_SerialNumber);
		},
		methods: {
			Close() {
				this.isShow3 = false;
			},
			payment(amount, Purchase_Order_Paystages_SerialNumber) {
				this.Purchase_Order_Paystages_SerialNumber =
					Purchase_Order_Paystages_SerialNumber;
				this.isShow3 = true;
				this.amount = amount;
			},
			async detailed_information(data) {
				const res = await getPurchaseOrderPaystages({
					Purchase_Order_SerialNumber: data,
				});
				this.detailed_information_list = res.Data;
				console.log(this.detailed_information_list);
			},
			async pay(data) {
				//获取仓库
				const res = await get_wj({
					Primary_Key: data,
					Primary_Key_Name: "Purchase_Order_SerialNumber",
					Data: "warehouse_info",
				});
			},
			// fixed() {
			//   //底部模块高度获取
			//   const query = uni.createSelectorQuery();
			//   query
			//     .select("#fixed")
			//     .boundingClientRect((data) => {
			//       this.fixedHeight = data.height;
			//     })
			//     .exec();
			// },
			handleClose() {
				//关闭支付
				if (this.Parcel.children.length > 1) {
					this.isShow2 = false;
				} else {
					this.isShow = false;
				}
			},
			accMul(arg1, arg2) {
				//浮点型相乘
				let m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return (
					(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
					Math.pow(10, m)
				);
			},
			accAdd(arg1, arg2) {
				//浮点型相加
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
			//取消订单
			cancel(id) {
				uni.showLoading({
					title: "取消中....",
				});
				var _this = this;
				if (this.loading) {
					this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXCancelOrder",
						method: "POST",
						data: {
							Open_ID: app.globalData.openid,
							Enterprise_Info_SerialNumber: app.globalData.enterprise,
							Collection_SerialNumber: id,
						},
						success: (res) => {
							uni.hideLoading();
						},
						complete() {
							uni.navigateTo({
								url: "../../pages/my/order?id=1",
							});
							_this.loading = true;
						},
					});
				}
			},
			handleDetails() {
				//打开去支付
				if (this.Parcel.children.length == 1) {
					this.isShow = true;
				} else {
					this.isShow2 = true;
				}
			},
			//取消退款
			quxiao(Sales_Order_SerialNumber) {
				let _this = this;
				uni.showToast({
					title: "已取消退款,请不要重复点击哦",
					icon: "none",
				});
				if (_this.loading) {
					_this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/NoClientRefund",
						method: "POST",
						data: {
							Sales_Order_SerialNumber,
							Cause: "客户取消申请",
						},
						success: (res) => {
							console.log(res);
							if (res.data.Status == "success") {
								this.hide = false;
							}
						},
						complete() {
							_this.loading = true;
						},
					});
				}
			},
			//申请退款
			tuikuan(Sales_Order_SerialNumber) {
				uni.showToast({
					title: "工作人员紧急处理中,请不要重复点击哦",
					icon: "none",
				});
				let _this = this;
				//生成退款日志
				if (this.loading) {
					this.loading = false;
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXWeChatRefundNativeAction",
						method: "POST",
						data: {
							Sales_Order_SerialNumber,
						},
						success: (res) => {
							console.log(res);
							if (res.data.Status == "success") {
								this.hide = false;
							}
						},
						complete() {
							_this.loading = true;
						},
					});
				}
			},
			toggle(type) {
				uni.showModal({
					title: "全部物流单号",
					content: `${type}`,
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f8f9fa;
	}

	.txt {
		line-height: 60rpx;
	}
</style>